<template>
    <div class="customer-view-my" v-loading="loading">
        <div class="page-head">
            <div class="info">
                <img class="avatar" :src="userInfo.avatar || $defaultAvatar" alt="" />
                <div class="desc">
                    <p>{{ userInfo.mgrName }}</p>
                    <p>{{ userInfo.orgName }}</p>
                </div>
            </div>
            <div class="red-packet" @click="handleRedPacket">
                <img :src="icon" alt="" />
                <p>我的红包</p>
            </div>
        </div>
        <div class="page-overview">
            <div class="page-overview-title">
                <p>资产概览</p>
                <p v-if="userInfo.dataDt">数据日期：{{ userInfo.dataDt }}</p>
            </div>
            <div class="page-overview-block">
                <div class="page-overview-block-item">
                    <p>{{ userInfo.mgrCustCount | numberFilter }}</p>
                    <p>管户客户</p>
                </div>
                <div class="page-overview-block-item">
                    <p>{{ userInfo.aumBal | numberFilter }}</p>
                    <p>AUM(万)</p>
                </div>
                <div class="page-overview-block-item">
                    <p>{{ userInfo.deptBal | numberFilter }}</p>
                    <p>存款(万)</p>
                </div>
            </div>
        </div>
        <div class="page-assets">
            <div class="page-assets-title">管户资产占比</div>
            <div id="customer-view-my-chart-1"></div>
        </div>
    </div>
</template>
<script>
    import managerViewApi from '@/api/manager-view';
    export default {
        data() {
            return {
                total: 0,
                loading: true,
                userInfo: {},
                chartData: [],
                icon: require('@/assets/img/managerView/red-packet-icon.png'),
                chartInfo: {
                    legend: [
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '15%',
                            y: '72%',
                            data: ['存款'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        },
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '55%',
                            y: '72%',
                            data: ['贷款'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        },
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '15%',
                            y: '77%',
                            data: ['理财'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        },
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '55%',
                            y: '77%',
                            data: ['资管'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        },
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '15%',
                            y: '82%',
                            data: ['信托'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        },
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '55%',
                            y: '82%',
                            data: ['基金'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        },
                        {
                            orient: 'horizontal',
                            align: 'left',
                            x: '15%',
                            y: '87%',
                            data: ['保险'],
                            textStyle: {
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgba(44, 44, 44, 0.5)'
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: '#202020',
                                        fontWeight: 500
                                    }
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'pie',
                            radius: ['40%', '57%'],
                            center: ['50%', '35%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: '{d}' + '%'
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }
                    ]
                }
            };
        },
        filters: {
            numberFilter(val) {
                const res = String(val || 0).replace(/\d+/, function (n) {
                    return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
                        return $1 + ',';
                    });
                });
                return res;
            }
        },
        mounted() {
            this.initUserInfo();
        },
        methods: {
            initUserInfo() {
                let obj = { jobNo: this.$store.state.vuex_wxUserId };
                this.loading = true;
                managerViewApi
                    .getMyAssetsInfo(obj)
                    .then((res) => {
                        if (res.data.code != 0) return;
                        this.userInfo = res.data.data;
                        let { deptBal, loanBal, finProdBal, amPlanBal, trustBal, fundBal, insureBal } = this.userInfo;
                        this.total = deptBal + loanBal + finProdBal + amPlanBal + trustBal + fundBal + insureBal;
                        if (this.total != 0) {
                            this.chartData = [
                                { value: deptBal, name: '存款' },
                                { value: loanBal, name: '贷款' },
                                { value: finProdBal, name: '理财' },
                                { value: amPlanBal, name: '资管' },
                                { value: trustBal, name: '信托' },
                                { value: fundBal, name: '基金' },
                                { value: insureBal, name: '保险' }
                            ];
                        }
                        this.initChart();
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            initChart() {
                let charts = this.$echarts.init(document.getElementById('customer-view-my-chart-1'));
                this.chartInfo.series[0].data = this.chartData;
                this.chartInfo.legend.map((i) => {
                    i.formatter = (name) => {
                        //只接收一个参数，就是类目名称
                        let value;
                        //使用name去放内容的数组中拿到对应的值
                        this.chartData.forEach((item) => {
                            if (item.name == name) {
                                let val = String((item.value / this.total) * 100),
                                    index = val.indexOf('.'),
                                    res = val.slice(0, index + 3);
                                value = res + '%';
                            }
                        });
                        //name, value可以理解为样式标记符，用于在富文本中设置对应的样式
                        return `{name|${name}}  ` + `  {value|${value}}`;
                    };
                });
                charts.setOption(this.chartInfo);
            },
            handleRedPacket() {
                this.$router.push({
                    path: '/managerView/red-packet',
                    query: {
                        wxUserId: this.$store.state.vuex_wxUserId
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .customer-view-my {
        width: 100%;
        height: 100%;
        background-color: #f8f8f7;
        background-image: url('../../assets/img/managerView/my1.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        padding: 16px 16px 0 16px;
        box-sizing: border-box;
        .page-head {
            display: flex;
            justify-content: space-between;
            .info {
                display: flex;
                .avatar {
                    width: 52px;
                    height: 52px;
                    border-radius: 50%;
                    margin-right: 16px;
                }
                .desc {
                    p:first-child {
                        font-size: 16px;
                        font-weight: 500;
                        color: #323232;
                        margin-bottom: 4px;
                    }
                    p:nth-child(2) {
                        font-size: 12px;
                        font-weight: 400;
                        color: #646566;
                    }
                }
            }
            .red-packet {
                text-align: center;
                img {
                    vertical-align: middle;
                    width: 24px;
                    height: auto;
                    margin: 0 auto;
                }
                p {
                    margin-top: 2px;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ed5550;
                }
            }
        }
        .page-overview {
            margin: 16px 0;
            &-title {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                p:first-child {
                    font-size: 16px;
                    font-weight: 500;
                    color: #2c2c2c;
                }
                p:nth-child(2) {
                    font-size: 12px;
                    font-weight: 400;
                    color: rgba(32, 32, 32, 0.8);
                }
            }
            &-block {
                height: 80px;
                background: #ffffff;
                box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                border-radius: 8px;
                padding: 16px 0;
                box-sizing: border-box;
                display: flex;
                &-item {
                    flex: 1;
                    border-right: 1px solid rgba(44, 44, 44, 0.1);
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p:first-child {
                        font-size: 18px;
                        font-weight: 500;
                        color: #323232;
                        line-height: 24px;
                    }
                    p:nth-child(2) {
                        font-size: 12px;
                        font-weight: 400;
                        color: #646566;
                        line-height: 16px;
                    }
                }
                &-item:last-child {
                    border: none;
                }
            }
        }
        .page-assets {
            margin-bottom: 14px;
            &-title {
                font-size: 16px;
                font-weight: 500;
                color: #2c2c2c;
                margin-bottom: 10px;
            }
            #customer-view-my-chart-1 {
                width: 100%;
                height: 360px;
                background: #ffffff;
                box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                border-radius: 8px;
            }
        }
    }
</style>
